<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue响应式的学习</title>
    <script src="./util.js"></script>
    <script src="./array.js"></script>
    <script src="./nextTick.js"></script>
    <script src="./Dep.js"></script>
    <script src="./Watcher.js"></script>
    <script src="./defineReactive.js"></script>
    <script src="./Observer.js"></script>
    <script src="./observe.js"></script>
    <script src="./Vue.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>
<script>
  let vm = new Vue({
    data() {
      return {
        age: 18,
        name: "张三123",
        list: [1, 2, 3],
        firstName: "张",
        lastName: "三",
      };
    },
    render() {
      let el = document.getElementById("app");
      el.innerHTML = `${this.name}----${this.age}---${this.addName}`;
    },
    watch: {
      age: function (oldVal, newVal) {
        console.log("监听的数据改变了", oldVal, newVal);
      },
    },
    computed: {
      addName() {
        return this.firstName + this.lastName;
      },
    },
  });
  setTimeout(() => {
    vm.age = 20;
    vm.firstName = "李";
  }, 1000);
</script>
